<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <div style="margin-top: 50px;margin-bottom:20px;text-align: left">
          设置员工工资：
        </div>
      </el-col>
      <el-col :span="20" :offset="2">
        <div class="grid-content bg-purple">
          <template>
            <el-table
              :data="tableData"
              style="width: 100%"
              height="400">
              <el-table-column
                fixed
                prop="username"
                label="职工号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="120">
              </el-table-column>
              <el-table-column
                prop="part_name"
                label="部门名"
                width="120">
              </el-table-column>
              <el-table-column
                prop="get_position"
                label="职位"
                width="120">
              </el-table-column>
              <el-table-column
                prop="sex_name"
                label="性别"
                width="100">
              </el-table-column>
              <el-table-column

                label="操作"
                width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, scope.row)"
                    type="text"
                    size="small">
                    员工工资
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
        <div class="pagenation">
          <el-pagination
            small
            layout="prev, pager, next"
            :total="total"
            :page-size="page_size"
            @prev-click="prevfun"
            @next-click="nextfun"
            @current-change="currentchange"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 抽屉-->
    <el-drawer
      :visible.sync="drawer"
      :title="curren_user_month"
    >
      <el-row style="text-align: left">
        <el-col :span="18" :offset="1">
          <el-form  :label-position="labelPosition" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
             <el-form-item label="部门职位" prop="pass">
              <el-input type="text" v-model="ruleForm.position" disabled autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="职工号" prop="pass">
              <el-input type="text" v-model="ruleForm.username" disabled autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="员工姓名" prop="pass">
              <el-input type="text" v-model="ruleForm.name" disabled autocomplete="off"></el-input>
            </el-form-item>

             <el-form-item label="基本工资" prop="salary">
              <el-input type="text" v-model="ruleForm.salary" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="加班工资" prop="overwork">
              <el-input type="text" v-model="ruleForm.overwork" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="旷工扣费" prop="absent">
              <el-input type="text" v-model="ruleForm.absent" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="请假扣费" prop="leave">
              <el-input v-model.number="ruleForm.leave"></el-input>
            </el-form-item>
             <el-form-item label="实发工资" prop="last_salary">
              <el-input v-model.number="ruleForm.last_salary" disabled></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
  import Vue from 'vue'
  import moment from 'moment'

  Vue.filter('dateYM', (input, formatString = "YYYY-MM") => {
    //es5函数参数设置默认值
    //const lastFormatString = formatString ||
     // moment(input) 把时间字符串转成时间对象
     // format(formatString) 把时间对象，按照指定格式，格式化成符合条件的字符串
    return moment(input).format(formatString)
})
  export default {
    name: 'ManageSalaryView',
    data () {
      var salary = (rule, value, callback) => {
        if (value==='') {
          return callback(new Error('基本工资不能为空'));
        }
        callback();
      };
      var overwork = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('加班工资不能为空'));
        }
          callback();

      };
      var absent = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('旷工费不能为空'));
        }
          callback();

      };
       var leave = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请假费不能为空'));
        }
          callback();

      };

      return {
        tableData: [],//展示的用户的申请记录
        curren_user_month:'',//点击圆员工工资
        total: 5, //所有数据个数
        page_size: 1,//每页数量
        drawer: false,//控制抽屉的开启
        now_page:'',//当前的页面号
        rows:'',//当前抽屉的员工的工资信息

        person_data:{},//放员工的工资信息
        labelPosition:'left',//输入框的label的对齐方式
         ruleForm: {
          m_time:'',//发的是哪个月的工资
          salary: '',
          overwork: '',
          absent: '',//
           leave:'',

           name:'',//员工名
           username:'',//职工号
           position:'',//部门职位
           last_salary:''//最后的工资
        },
        rules: {
          salary: [
            { validator: salary, trigger: 'blur' }
          ],
          overwork: [
            { validator: overwork, trigger: 'blur' }
          ],
          absent: [
            { validator: absent, trigger: 'blur' }
          ],
          leave: [
            { validator: leave, trigger: 'blur' }
          ],
        }
      };

    },
    methods: {
      get_salary(){
          //获取当前员工的工资情况
        this.$axios({
          url:this.$settings.base_url+`/user/onesalary/?user_id=${this.rows.id}`,
          method:'get'
        }).then(res=>{
          this.ruleForm.leave=res.data.data.leave
          this.ruleForm.salary=res.data.data.salary
          this.ruleForm.last_salary=res.data.data.last_salary
          this.ruleForm.absent=res.data.data.absent
          this.ruleForm.overwork=res.data.data.overwork
          this.person_data=res.data
          this.curren_user_month=this.$moment(res.data.data.m_time).format('YYYY-MM月的工资情况')
        })
      },
      deleteRow (index, rows) {
        this.ruleForm.position = rows.get_position
        this.ruleForm.name = rows.name
        this.ruleForm.username = rows.username
        this.ruleForm.users = rows.id//将用户的id也送过去
        this.drawer = true
        this.rows=rows
        this.get_salary()
      },
      search () {
        this.get_data(part = this.value)
      },
      //获取用户的信息
      get_data (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/partsalary/?page=${page}`,
          method: 'get'
        }).then(res => {
          this.tableData = res.data.results
          this.page_size = res.data.page_size
          this.total = res.data.count
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            delete this.ruleForm.last_salary
            this.$axios({
              url:this.$settings.base_url+`/user/onesalary/`,
              method:'post',
              data:this.ruleForm
            }).then(res=>{
              if(res.data.code===100){
                this.$message.success('修改员工工资成功')
                this.get_salary()
                // this.get_data(this.now_page)
              }else {
                console.log(res)
                this.$message.error('修改失败')
              }
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_data(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_data(value)
      },
      currentchange (value) {
        this.get_data(value)
        this.now_page=value//获取到当前的页面数

      },

    },
    mounted () {
      this.get_data()//初始化用户信息

    },

  }
</script>

<style scoped>

</style>
